<template>
  <div class="orderdetail-container">
    <!-- 订单状态 -->
    <div class="order-status">
      <div slot="nav-left" class="nav-back" @click="$router.back()">
        <van-icon name="arrow-left" />
      </div>
      <van-image class="status-img" width="30" height="30" fit="container" src="imgs/user/order/status.png" />
      <span class="status-text">订单{{orderInfo.showStatus}}</span>
    </div>
    <!-- 收货人信息 -->
    <div class="receive-info-box" v-if="addressLoading">
      <div class="receive-info">
        <div class="phone-box skeleton"><span class="name"></span><span class="phone"></span></div>
        <span class="address skeleton"></span>
      </div>
    </div>
    <div class="receive-info-box" v-if="!addressLoading && orderInfo.mallOrderAddress">
      <div class="receive-info">
        <div class="phone-box"><span class="name">{{orderInfo.mallOrderAddress.receiverName}}</span><span class="phone">{{orderInfo.mallOrderAddress.phone}}</span></div>
        <span class="address">{{orderInfo.mallOrderAddress.provinceName + orderInfo.mallOrderAddress.cityName + orderInfo.mallOrderAddress.areaName + orderInfo.mallOrderAddress.address}}</span>
      </div>
    </div>
    <!-- 商品信息 -->
    <!-- 骨架屏 -->
    <div class="order-goods-list circle-bg" v-if="orderItemsLoading.length != 0">
      <div class="order-goods-item" v-for="index in orderItemsLoading" :key="index">
        <div class="preview-img skeleton"></div>
        <div class="goods">
          <span class="title skeleton van-multi-ellipsis--l2"></span>
          <span class="num skeleton"></span>
          <span class="price skeleton">
            <span class="money skeleton"></span>
          </span>
        </div>
      </div>
    </div>
    <div class="order-goods-list circle-bg" v-if="orderItemsLoading.length == 0">
      <div class="order-goods-item" v-for="(orderItem, index) in orderInfo.orderItemList" :key="index">
        <van-image :src="orderItem.goodsPic" />
        <div class="goods">
          <span class="title van-multi-ellipsis--l2">{{orderItem.goodsName}}</span>
          <span class="num">x{{orderItem.goodsNum}}</span>
          <span class="price">
            <span class="money">¥{{orderItem.goodsPrice | fentoyuan}}</span>
            <van-button v-if="(orderInfo.status == '3' || orderInfo.status == '4') && orderItem.canApply == '0'" class="btn" @click="returnGoods(orderItem.goodsId)">申请售后</van-button>
            </span>
        </div>
      </div>
      <div class="return-btn" v-if="orderInfo.status == '1' && orderInfo.canApply == '0'">
        <van-button class="btn" @click="refundGoods">申请退款</van-button>
      </div>
    </div>
    <!-- 支付信息 -->
    <div class="pay-info circle-bg">
      <div class="item"><span class="title">订单编号:</span><span class="text">{{orderInfo.orderSn}}</span></div>
      <div class="item"><span class="title">下单时间:</span><span class="text">{{orderInfo.createTime}}</span></div>
      <div class="item" v-if="orderInfo.payTime"><span class="title">支付时间:</span><span class="text">{{orderInfo.payTime}}</span></div>
    </div>
    <!-- 金额信息 -->
    <div class="money-info circle-bg">
      <div class="item"><span class="title">商品总额:</span><span class="text">¥{{orderInfo.cartTotalMoney | fentoyuan}}</span></div>
      <div class="item"><span class="title">运费:</span><span class="text">¥{{orderInfo.orderFreightMoney | fentoyuan}}</span></div>
      <div class="item"><span class="title">优惠金额:</span><span class="text">-¥{{orderInfo.orderDiscountMoney | fentoyuan}}</span></div>
      <div class="item"><span class="title"></span><span class="text">实付款:<em>¥{{orderInfo.orderPayMoney | fentoyuan}}</em></span></div>
    </div>
    <!-- 总体信息 -->
    <div class="order-total">
      <span class="num">共<em>{{orderInfo.orderItemList.length}}</em>件商品</span><span>合计:</span><span class="money">¥{{orderInfo.orderPayMoney | fentoyuan}}</span>
    </div>
  </div>
</template>

<script>
import constants from '@/config/constants'
import orderApi from '@/api/orderApi';
import utils from '@/utils/utils'

export default {
  data () {
    return {
      addressLoading: true,
      orderItemsLoading: [],
      orderInfo: {
        showStatus: '',
        mallOrderAddress: {},
        orderItemList: []
      }
    }
  },
  created () {
    for(var i=0; i<this.$route.query.itemLength; i++){
      this.orderItemsLoading.push(i);
    }
    this.getOrderDetail();
  },
  methods: {
    /* 获取订单详情 */
    getOrderDetail () {
      orderApi.orderDetail(this.$route.query.id).then(result => {
        if(result.code == constants.SUCCESS){
          setTimeout(() => {
            this.orderInfo = result.data;
            this.addressLoading = false;
            this.orderItemsLoading = [];
          }, 200);
        }
      })
    },
    /* 退款 */
    refundGoods () {
      var goodIdsArray = new Array();
      this.orderInfo.orderItemList.forEach(item =>{
        goodIdsArray.push(item.goodsId);
      })
      this.$router.push({path: '/applyEdit', query: {orderId: this.orderInfo.id, goodsIds: utils.join(goodIdsArray, ",")}})
    },
    /* 退货 */
    returnGoods (goodsId) {
      this.$router.push({path: '/applyEdit', query: {orderId: this.orderInfo.id, goodsIds: goodsId}})
    }
  }
}
</script>

<style lang="scss">
.orderdetail-container{
  margin-bottom: 60px;
  .order-status{
    height: 90px;
    background: linear-gradient(0deg,#efc480,#f8dca5) no-repeat;
    background-size: 100% 90px;
    display: flex;
    position: relative;
    .nav-back{
      position: absolute;
      top: 21px;
      left: 0;
      .van-icon{
        font-size: 24px;
        color: #fff;
      }
    }
    .status-img{
      margin: 20px 0px 0px 45px;
    }
    .status-text{
      margin: 20px 0px 0px 8px;
      font-size: 15px;
      line-height: 27px;
      color: #fff;
    }
  }
  .receive-info-box{
    padding: 5px 10px;
    .receive-info{
      background-color: #fff;
      position: relative;
      top: -25px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      padding: 13px 15px 15px 15px;
      .phone-box.skeleton{
        background: #f6f6f6;
        border-radius: 5px;
        height: 20px;
      }
      .phone-box{
        color: #333;
        font-size: 15px;
        margin-bottom: 5px;
        .name{
          margin-right: 10px;
        }
      }
      .address.skeleton{
        background: #f6f6f6;
        border-radius: 5px;
        height: 17px;
      }
      .address{
        color: #999;
        font-size: 13px;
      }
    }
  }
  .order-goods-list{
    background: #fff;
    position: relative;
    top: -20px;
    .return-btn{
      display: flex;
      justify-content: flex-end;
      .btn{
        height: 30px;
        margin-right: 5px;
        padding: 5px 10px;
        font-size: 12px;
      }
    }
    /deep/ .price{
      .btn{
        padding: 5px 10px;
        font-size: 12px;
        margin-right: 5px;
        border-radius: 8px;
      }
    }
  }
  .order-price{
    display: flex;
    justify-content: flex-end;
    .discount,.freight,.pay{
      margin-right: 10px;
      .title,.money{
        font-size: 12px;
        color: #999;
      }
      .title{
        margin-right: 5px;
      }
    }
    .pay{
      .money{
        color: #333;
      }
    }
  }
  .pay-info{
    background: #fff;
    position: relative;
    top: -20px;
    display: flex;
    flex-direction: column;
    .item{
      display: flex;
      align-items: center;
      height: 25px;
      line-height: 25px;
      .title{
        font-size: 14px;
        color: #999;
        margin-right: 15px;
      }
      .text{
        font-size: 14px;
        color: #333;
      }
    }
  }
  .money-info{
    background-color: #fff;
    position: relative;
    top: -20px;
    display: flex;
    flex-direction: column;
    .item{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 25px;
      line-height: 25px;
      .title{
        font-size: 14px;
        color: #999;
        margin-right: 5px;
      }
      .text{
        font-size: 14px;
        color: #333;
        em{
          font-size: 14px;
          font-style: normal;
          margin-left: 10px;
          color: #e1212b;
        }
      }
    }
  }
  .order-total{
    border-top: 1px solid #f6f6f6;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    right: 0;
    height: 50px;
    width: 100%;
    padding-right: 15px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    span{
      font-size: 14px;
      color: #999;
    }
    .num{
      margin-right: 5px;
      em{
        font-style: normal;
        margin: 0px 5px;
      }
    }
    .money{
      font-weight: bold;
      margin-left: 5px;
      color: #333;
    }
  }
}
</style>
